<template>
  <div class="detail-page">
    <!-- @click="$router-back()" 回退按钮 -->
    <nav class="nav"><span class="back" @click="$router - back()"></span></nav>
    <div class="top">
      <span >
        <van-icon name="arrow-left" />
      </span>
      <h3>月季园（徐汇）</h3>
    </div>
    <div class="pic">
      <img src="@/assets/img.jpg" alt="" />
    </div>
    <!-- 中间部分 -->
    <div class="center">
      <div class="title">
        <h3>1111</h3>
        <p><span>近地铁</span></p>
      </div>

      <div class="massage">
        <div class="m-left">
          <div>231 <span>/月</span></div>
          <div class="m-gray">租金</div>
        </div>
        <div class="m-center">
          <div>一室</div>
          <div class="m-gray">房型</div>
        </div>
        <div class="m-right">
          <div>14平米</div>
          <div class="m-gray">面积</div>
        </div>
      </div>

      <div class="msg-bottom">
        <div class="b-left">
          <div>
            <span>装修：</span>
            <i>精装</i>
          </div>
          <div>
            <span>楼层：</span>
            <i>高楼层</i>
          </div>
        </div>

        <div class="b-right">
          <div>
            <span>朝向：</span>
            <i>东</i>
          </div>
          <div>
            <span>类型：</span>
            <i>普通住宅</i>
          </div>
        </div>
      </div>
    </div>
    <!-- 地图 -->
    <div class="map">
      <div class="map-text"><span>小区：</span> 天山星城</div>
      <div class="m-map">
        <!-- 放地图 -->
        <baidu-map class="m-map" :center="center" :zoom="zoom" @ready="initMap">
          <bm-marker
            :position="{ lng: 121.480539, lat: 31.2359295 }"
            :dragging="true"
            @click="clickFn"
          >
            <!-- <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/> -->
          </bm-marker>
          <!-- 覆盖物  遍历v-for-->
          <bm-overlay 
          v-for="(item,index) in list"
          :key="index"
          pane="labelPane" 
          class="sample" 
          @draw="draw($event,item.coord)" >
          <span>{{item.label}}{{item.count}}房子</span>

          </bm-overlay>
        </baidu-map>
        <!-- <img src="@/assets/img.jpg" alt="" /> -->
      </div>
    </div>
    <!-- 房屋配套 -->
    <div class="house">
      <div class="house-title">
        <h3>房屋配套</h3>
      </div>
      <div class="house-list">
        <ul>
          <li>
            <i><van-icon name="like-o" /></i>衣柜
          </li>
          <li>
            <i><van-icon name="cashier-o" /></i>洗衣机
          </li>
          <li>
            <i><van-icon name="like-o" /></i>空调
          </li>
          <li>
            <i><van-icon name="fire-o" /></i>天然气
          </li>
          <li>
            <i><van-icon name="like-o" /></i>冰箱
          </li>
        </ul>
        <ul>
          <li>
            <i><van-icon name="like-o" /></i>暖气
          </li>
          <li>
            <i><van-icon name="cashier-o" /></i>电视
          </li>
          <li>
            <i><van-icon name="fire-o" /></i>热水器
          </li>
          <li>
            <i><van-icon name="like-o" /></i>宽带
          </li>
          <li>
            <i><van-icon name="like-o" /></i>沙发
          </li>
        </ul>
      </div>
    </div>
    <!-- 房源概况 -->
    <div class="resource">
      <div class="r-title">
        <h3>房源概况</h3>
      </div>
      <div class="r-message">
        <div class="r-top">
          <div class="m-img">
            <img src="@/assets/img1.png" alt="" />
          </div>
          <div class="m-text">
            <div>王女士</div>
            <div class="t-color">
              <i><van-icon name="cashier-o" /></i> 已认证房主
            </div>
          </div>
          <div class="m-btn">发消息</div>
        </div>

        <div class="r-text">
          "1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
          2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
          3.人车分流，环境优美。
          4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。"
        </div>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="like">
      <!-- 标题 -->
      <div class="l-title">
        <h3>猜你喜欢</h3>
      </div>
      <div class="l-one">
        <div class="l-pic"><img src="@/assets/1.png" alt="" /></div>
        <div class="one-right">
          <h3>安贞西里3室一厅</h3>
          <div class="one-gray"><span>72.32㎡/南 北/低楼层</span></div>
          <div class="one-btn">随时看房</div>
          <div class="one-price">
            4500
            <span> 元/月</span>
          </div>
        </div>
      </div>
      <div class="l-one">
        <div class="l-pic"><img src="@/assets/2.png" alt="" /></div>
        <div class="one-right">
          <h3>天居园2室1厅</h3>
          <div class="one-gray"><span>72.32㎡/南 北/低楼层</span></div>
          <div class="one-btn">随时看房</div>
          <div class="one-price">
            7200
            <span> 元/月</span>
          </div>
        </div>
      </div>
      <div class="l-one">
        <div class="l-pic"><img src="@/assets/3.png" alt="" /></div>
        <div class="one-right">
          <h3>角门甲4号院1室1厅</h3>
          <div class="one-gray"><span>72.32㎡/南 北/低楼层</span></div>
          <div class="one-btn">随时看房</div>
          <div class="one-price">
            4300
            <span> 元/月</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="f-left">
        <i><van-icon name="cashier-o" /></i>
        收藏
      </div>
      <div class="f-center">在线咨询</div>
      <div class="f-right">电话预约</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HouseDetail",
  data() {
    return {
      obj: {},
      // center: { lng: 116.404, lat: 39.915 },
      // center:"北京",
      // center: "杭州",
      center: "上海",
      zoom: 15, // 放大的倍数
      list:[
         {
          "label": "杨浦",
          "value": "AREA|67fad918-f2f8-59df",
          "coord": {
              "latitude": "31.29397421",
              "longitude": "121.5361245"
          },
          "count": 107
      },
      {
          "label": "徐汇",
          "value": "AREA|a1417707-f2c1-e5ef",
          "coord": {
              "latitude": "31.194434",
              "longitude": "121.43798"
          },
          "count": 697
      },
      {
          "label": "普陀",
          "value": "AREA|b3e7fdc7-c67a-5684",
          "coord": {
              "latitude": "31.239297",
              "longitude": "121.42746"
          },
          "count": 182
      },
      {
          "label": "浦东",
          "value": "AREA|48bb555e-09d3-677b",
          "coord": {
              "latitude": "31.159254",
              "longitude": "121.573916"
          },
          "count": 468
      },
      {
          "label": "闸北",
          "value": "AREA|4ae7fdc5-2fda-87b7",
          "coord": {
              "latitude": "31.245238",
              "longitude": "121.462705"
          },
          "count": 75
      },
      {
          "label": "静安",
          "value": "AREA|f9842cb9-3dc8-556d",
          "coord": {
              "latitude": "31.240794",
              "longitude": "121.462509"
          },
          "count": 139
      },
      {
          "label": "黄浦",
          "value": "AREA|feeb90f1-db8b-7790",
          "coord": {
              "latitude": "31.216381",
              "longitude": "121.505573"
          },
          "count": 175
      },
      {
          "label": "宝山",
          "value": "AREA|b6ad32aa-0d1d-88d6",
          "coord": {
              "latitude": "31.31429863",
              "longitude": "121.4163684"
          },
          "count": 85
      },
      {
          "label": "闵行",
          "value": "AREA|5654197a-39af-6dc1",
          "coord": {
              "latitude": "31.162369",
              "longitude": "121.376215"
          },
          "count": 112
      },
      {
          "label": "青浦",
          "value": "AREA|38c39e6b-5dfa-0245",
          "coord": {
              "latitude": "31.181512",
              "longitude": "121.271793"
          },
          "count": 13
      },
      {
          "label": "虹口",
          "value": "AREA|0fc7aa90-2a6a-83be",
          "coord": {
              "latitude": "31.280439",
              "longitude": "121.48269"
          },
          "count": 72
      },
      {
          "label": "嘉定",
          "value": "AREA|fd4020b0-e01c-9faa",
          "coord": {
              "latitude": "31.330734",
              "longitude": "121.260313"
          },
          "count": 40
      },
      {
          "label": "奉贤",
          "value": "AREA|25fe0fdc-e9a1-982f",
          "coord": {
              "latitude": "31.002185",
              "longitude": "121.43787"
          },
          "count": 20
      }

      ]
    };
  },
  mounted(){
    // this.getCitylist()
  },
  methods: {
    getDetail() {
      axios({
        url: "http://liufusong.top:8080/houses?cityId=AREA%7Cdbf46d32-7e76-1196",
      }).then((res) => {
        console.log(res);
      });
    },
    getList() {
      axios({
        url: "http://liufusong.top:8080/houses?cityId=AREA%7Cdbf46d32-7e76-1196",
        params: {
          stat: 1,
          end: 10,
        },
      }).then((res) => {
        console.log(res.data.body);
        this.getlist = res.data.body.list;
      });
    },
    clickFn(e) {
      console.log(e.point);
    },
    // 自定义覆盖物仅在地图发生变化时触发 draw 方法重绘覆盖物视图
    draw({ el, BMap, map },{longitude, latitude}) {
      // https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html
      // new BMap.Point
      // 以指定的经度和纬度创建一个地理点坐标
      const pixel = map.pointToOverlayPixel(new BMap.Point(longitude, latitude));
      // 根据地理坐标获取对应的覆盖物容器的坐标，此方法用于自定义覆盖物
      // console.log(pixel);
      // {x: 389, y: 300}
      el.style.left = pixel.x - 60 + "px";
      el.style.top = pixel.y - 20 + "px";
    },
    initMap({ BMap, map }) {
      const myGeo = new BMap.Geocoder();
      myGeo.getPoint(
        "上海人民广场",
        function (point) {
          if (point) {
            console.log(point);
            map.centerAndZoom(point, 11);
          }
        },
        "上海人民广场"
      );
    },
  // async  getCitylist(){
  //   const res =   await axios({
  //       url:'http://liufusong.top:8080/area/map?id=AREA%7Cdbf46d32-7e76-1196'
  //     })
  //     console.log(res);
  //   }
  },
};
</script>

<style lang="less" scoped>
.detail-page {
  position: relative;
  background-color: #f4f4f4;
  height: 1720px;
  // 顶部
  .top {
    display: flex;
    height: 45px;
    background-color: #21b97a;
    color: #fff;

    span {
      line-height: 40px;
      font-size: 16px;
      padding-left: 15px;
    }
    h3 {
      line-height: 9px;
      margin: auto;
      font-weight: 400;
      font-size: 16px;
    }
  }
  // 图品
  .pic {
    height: 252px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 中间文字介绍区
  .center {
    padding: 15px;
    background-color: #fff;
    .title {
      margin: 0;
      h3 {
        margin: 15px 0;
        font-size: 16px;
        font-weight: 400;
      }
      p {
        margin: 0;
        font-size: 12px;
        display: inline-block;
        color: #39becd;
        background-color: #e1f5f8;
        border-radius: 3px;
        span {
          padding: 5px;
        }
      }
    }
    // 信息区
    .massage {
      display: flex;
      justify-content: space-between;
      height: 52px;
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
      padding: 15px 0;
      margin: 15px 0;
      .m-left,
      .m-center,
      .m-right {
        width: 109px;
        height: 26px;
        margin-left: 8px;
        text-align: center;
        font-size: 18px;
        color: #fa5741;
        line-height: 26px;
        font-weight: 700;
        span {
          font-size: 12px;
        }
        .m-gray {
          color: #999;
          font-size: 14px;
        }
      }
    }
    .msg-bottom {
      display: flex;
      height: 52px;
      .b-left,
      .b-right {
        span {
          font-size: 13px;
          color: #999;
          padding-right: 5px;
          line-height: 26px;
        }
        i {
          font-size: 13px;
        }
      }
      .b-right {
        padding-left: 100px;
      }
    }
  }
  // 地图
  .map {
    background-color: #fff;
    height: 189px;
    margin-top: 10px;
    .map-text {
      height: 44px;
      line-height: 44px;
      padding: 0 15px;
      font-size: 14px;
      span {
        color: #666;
      }
    }
    .m-map {
      height: 145px;
      width: 100%;
      .sample {
        width: 35px;
        height: 35px;
        line-height: 40px;
        font-size: 10px;
        background:green;
        overflow: hidden;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        position: absolute;
      }
      // img {
      //   width: 100%;
      //   height: 100%;
      // }
    }
  }
  //房屋配套
  .house {
    height: 200px;
    margin-bottom: 10px;
    background-color: #fff;
    .house-title {
      padding: 0 15px;
      h3 {
        font-size: 15px;
        color: #333;
        margin: 0;
        margin-bottom: 10px;
        font-weight: 600;
        border-bottom: 1px solid #cecece;
        padding: 15px 0;
      }
    }
    .house-list {
      // display: flex;
      padding: 0 15px;
      ul {
        display: flex;
        text-align: center;
        li {
          margin: 10px 0;
          height: 51px;
          width: 71px;
          font-size: 14px;
          i {
            font-size: 22px;
            height: 28px;
            display: block;
          }
        }
      }
    }
  }
  // 房源概况
  .resource {
    padding: 0 15px;
    height: 266px;
    margin-bottom: 10px;
    background-color: #fff;
    .r-title {
      h3 {
        font-size: 15px;
        font-weight: 600;
        border-bottom: 1px solid #cecece;
        padding: 15px 0;
        margin: 0;
        margin-bottom: 10px;
      }
    }
    .r-message {
      .r-top {
        margin-bottom: 10px;
        display: flex;
        position: relative;
        .m-img {
          width: 52px;
          height: 52px;
          margin-top: 10px;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .m-text {
          width: 81px;
          height: 41px;
          padding-top: 15px;
          padding-left: 5px;
          font-size: 14px;
          color: #333;
          line-height: 23px;
          .t-color {
            font-size: 12px;
            color: #fa5741;
          }
        }
        .m-btn {
          position: absolute;
          top: 20px;
          right: 15px;
          width: 42px;
          height: 21px;
          font-size: 14px;
          color: #33be85;
          border: 1px solid #33be85;
          border-radius: 3px;
          padding: 3px 15px;
        }
      }
      .r-text {
        padding: 10px 0;
        font-size: 14px;
        color: #333;
      }
    }
  }
  // 猜你喜欢
  .like {
    background-color: #fff;
    padding: 0 15px;
    .l-title {
      margin-bottom: 10px;
      border-bottom: 1px solid #cecece;
      font-weight: 600;
      padding: 15px 0;
      h3 {
        font-size: 15px;
        color: #333;
        margin: 0;
      }
    }
    .l-one {
      padding-top: 18px;
      display: flex;
      height: 101px;
      border-bottom: 1px solid #cecece;

      .l-pic {
        width: 106px;
        height: 80px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .one-right {
        padding-left: 12px;
        h3 {
          margin: 0;
          font-size: 15px;
          color: #394043;
        }
        .one-gray {
          font-size: 12px;
          color: #afb2b3;
          line-height: 23px;
        }
        .one-btn {
          width: 48px;
          height: 12px;
          color: #39becd;
          background-color: rgb(225, 245, 248);
          border-radius: 3px;
          padding: 5px;
          font-size: 12px;
          line-height: 12px;
        }
        .one-price {
          color: #fa5741;
          font-size: 16px;
          span {
            font-size: 12px;
          }
        }
      }
    }
  }
  // 底部
  .footer {
    width: 100%;
    display: flex;
    position: fixed;
    height: 50px;
    bottom: 0;
    background-color: #fff;
    text-align: center;
    line-height: 50px;
    .f-left {
      i {
        font-size: 20px;
        padding-top: 2px;
      }
      width: 33.33%;
      border-right: 1px solid #e2e0e0;
      font-size: 17px;
      color: #999;
    }
    .f-center {
      width: 33.33%;
      color: #999;
    }
    .f-right {
      width: 33.33%;
      color: #fff;
      border-right: 1px solid #e8e8e9;
      background-color: #21b97a;
    }
  }
}
</style>
